<template>
	<view>
		<!--    <u-navbar :title="$t('feeServices.pPService')" :autoBack="false" @leftClick="leftClick(urlIndex)" bgColor="#F6F6F6"
      titleStyle="font-weight: 500; color: #000000;" :placeholder="true">
    </u-navbar> -->
		<view class="header">
			<view class="huiqu" @click.stop="fanhui()">
				<image src="@/static/image/bourse/fanhui.png" mode=""></image>
			</view>
			<view class="header__center" name="center">
				<view class="box_tb" v-for="(item, index) in list1" :key="index" :class="{ active: tabIndex === index }" @click="handleSwitchTab(index)">
					{{ item.name }}
				</view>
			</view>
			<view class="kongbai"></view>
		</view>
		<view class="released-view">
			<view class="category-view">
				<view class="title">{{ $t('feeServices.category') }}</view>
				<view class="choose-box" @click="labelShow = true">
					<view class="title omit" v-if="formData.labelId">{{ getTagName() }}</view>
					<view class="title placeholder" v-else>{{ $t('feeServices.PleaseChoose') }}</view>
					<view class="iconfont icon-jiantou-you you"></view>
				</view>
			</view>
			<view class="Paid-view">
				<view class="title" style="margin-bottom: 30upx">{{ $t('feeServices.ServiceTitle') }}</view>
				<u-textarea
					v-model="formData.title"
					:placeholder="$t('feeServices.ServiceTitleTip')"
					count
					maxlength="100"
					placeholderStyle="color: rgba(0, 0, 0, 0.3)"
					class="Service-title"
					style="border: unset; padding: 0px; height: 150upx"
				></u-textarea>
			</view>
			<view class="Paid-view">
				<view class="title" style="margin-bottom: 30upx">{{ $t('feeServices.requirements') }}</view>
				<u-textarea
					v-model="formData.requirements"
					:placeholder="$t('feeServices.RequirementsTip')"
					count
					maxlength="200"
					placeholderStyle="color: rgba(0, 0, 0, 0.3)"
					class="Requirements"
					style="border: unset; padding: 0px; height: 220upx"
				></u-textarea>
			</view>
			<!-- 上传文档 -->
			<view class="Paid-view">
				<view class="title" style="margin-bottom: 30upx">上传文档(0/6)</view>
				<view class="view_img">
					<image src="@/static/image/bourse/appeal.png" mode=""></image>
				</view>
			</view>
			<view class="write-view">
				<view class="write-detail">
					<view class="title">{{ $t('feeServices.missionLocation') }}</view>
					<regionSelect ref="regionSelect" :cityValue.sync="cityValue" @countryIosCode="getCurrentPostCity" @totalValue="getTotalValue"></regionSelect>
					<view class="iconfont icon-jiantou-you you" @click="$refs.regionSelect.show = true"></view>
				</view>
				<view class="write-detail">
					<view class="title">{{ $t('feeServices.Remuneration') }}</view>
					<input
						v-model="formData.remuneration"
						placeholder="0.00"
						type="number"
						style="flex: 1; text-align: right; font-size: 30upx"
						@blur="formData.remuneration = numberChange(numInput($event.detail.value, 2), 0.01, 1000000)"
						placeholderStyle="color: rgba(0, 0, 0, 0.3); font-size: 30upx;"
					/>
					<view class="title" style="margin-left: 24upx">{{ currencyObj.currency }}</view>
				</view>
				<view class="write-detail">
					<view class="title">{{ $t('feeServices.Deadline') }}</view>
					<view class="choose-box" @click="dateShow = true">
						<view class="title omit" v-if="formData.deadline">{{ formData.deadline }}</view>
						<view class="title placeholder" v-else>{{ $t('feeServices.PleaseChoose') }}</view>
						<view class="iconfont icon-jiantou-you you"></view>
					</view>
				</view>
			</view>
			<view class="write-view">
				<view class="write-detail" :style="formData.allowReferrals == 1 ? 'padding: 30upx 0upx 40upx;' : 'padding: 30upx 0upx;'">
					<view>
						<view class="title">{{ $t('feeServices.allowReferrals') }}</view>
						<view class="allow-tip">{{ $t('feeServices.allowReferralsTip') }}</view>
					</view>
					<u-switch v-model="formData.allowReferrals" :active-value="1" :inactive-value="0" activeColor="#61BDB2" inactiveColor="#EBEBEB"></u-switch>
				</view>
				<view class="write-detail" :style="referralsMoney == 1 ? 'border: unset; padding-bottom: 0upx;' : ''" v-if="formData.allowReferrals == 1">
					<view class="title">{{ $t('feeServices.ReferralReward') }}</view>
					<view class="choose-box" @click="typeShow = true">
						<view class="title omit" v-if="referralsMoney">{{ getTypeName() }}</view>
						<view class="title placeholder" v-else>{{ $t('feeServices.PleaseChoose') }}</view>
						<view class="iconfont icon-jiantou-you you"></view>
					</view>
				</view>
				<view class="write-detail" v-if="formData.allowReferrals == 1 && referralsMoney == 1">
					<view class="title"></view>
					<input
						v-model="formData.referralsMoney"
						placeholder="0.00"
						type="number"
						style="flex: 1; text-align: right; font-size: 30upx"
						@blur="formData.referralsMoney = numberChange(numInput($event.detail.value, 2), 0.01, 1000000)"
						placeholderStyle="color: rgba(0, 0, 0, 0.3); font-size: 30upx;"
					/>
					<view class="title" style="margin-left: 24upx">{{ currencyObj.currency }}</view>
				</view>
			</view>
			<view class="bond-tip">
				<view>
					{{ $t('feeServices.bondTip1First') }}
					<text class="bond-money">{{ currencyObj.symbol }}{{ bondObj.bond }}</text>
					{{ $t('feeServices.bondTip1last') }}
				</view>
				<view>{{ $t('feeServices.bondTip2') }}</view>
			</view>
			<button class="btn" @click="dialogConfirm" :class="{ 'btn-green': isExit() }">{{ $t('friend.post') }}</button>
		</view>
		<!-- 选择标签 -->
		<u-picker
			:closeOnClickOverlay="true"
			@close="labelShow = false"
			:show="labelShow"
			ref="uPickerLabel"
			:columns="[tagList]"
			@confirm="confirmLabel"
			keyName="labelNew"
			@cancel="labelShow = false"
			:cancelText="$t('cancel')"
			:confirmText="$t('confirm')"
		></u-picker>
		<!-- 选择薪资类型 -->
		<u-picker
			:closeOnClickOverlay="true"
			@close="typeShow = false"
			:show="typeShow"
			ref="uPickerType"
			:columns="[typeList]"
			@confirm="confirmType"
			keyName="label"
			@cancel="typeShow = false"
			:cancelText="$t('cancel')"
			:confirmText="$t('confirm')"
		></u-picker>
		<!-- 选择时间 -->
		<u-datetime-picker
			:closeOnClickOverlay="true"
			@close="dateShow = false"
			:minDate="minDate"
			:show="dateShow"
			v-model="deadline"
			mode="datetime"
			@cancel="dateShow = false"
			@confirm="confirmDate"
			:cancelText="$t('cancel')"
			:confirmText="$t('confirm')"
		></u-datetime-picker>
	</view>
</template>

<script>
import regionSelect from '../friendsInformation/components/regionSelect.vue';
import { queryLabelList, queryCountryCurrency, queryFeeBond, queryBountyReward, queryRewardDetail, queryRecruitment } from '@/services/feeServices.js';
export default {
	data() {
		return {
			id: '',
			formData: {
				location: [],
				categoryId: 0,
				labelId: '',
				workPlace: '',
				title: '',
				remuneration: '',
				deadline: '',
				requirements: '',
				allowReferrals: 0,
				referralsMoney: '',
				currencyId: '',
				countryIosCode: ''
			},
			currencyObj: {},
			bondObj: {},
			tagList: [],
			cityValue: [],
			referralsMoney: -1,
			deadline: '',
			typeList: [
				{
					label: this.$t('feeServices.Negotiable'),
					value: -1
				},
				{
					label: this.$t('feeServices.specificAmount'),
					value: 1
				}
			],
			typeShow: false,
			labelShow: false,
			dateShow: false,
			language: '',
			isPost: false,
			urlIndex: 'RewardRelease',
			minDate: undefined,
			list1: [
				{
					// name: this.$t('order.Recharge'),
					name: '发布单人悬赏',
					type: 'recharge'
				},
				{
					// name: this.$t('order.Exchange'),
					name: '发布多人悬赏',
					type: 'exchange'
				}
			],
			tabIndex: 0
		};
	},
	components: { regionSelect },
	methods: {
		fanhui() {
			uni.navigateBack();
		},
		handleSwitchTab(index) {
			this.tabIndex = index;
		},
		change() {},
		confirmDate(e) {
			this.formData.deadline = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
			this.dateShow = false;
		},
		confirmLabel(e) {
			this.formData.labelId = e.value[0].id;
			this.labelShow = false;
		},
		confirmType(e) {
			this.referralsMoney = e.value[0].value;
			this.changeReferralsMoney();
			this.typeShow = false;
		},
		async getCurrentPostCity(e) {
			this.formData.countryIosCode = e;
		},
		getTotalValue(value) {
			this.formData.workPlace = JSON.stringify(value);
		},
		changeReferralsMoney() {
			if (this.referralsMoney !== -1 && Number(this.formData.referralsMoney) === -1) {
				this.formData.referralsMoney = '';
			}
		},
		async getMainDetail() {
			const resp = await queryRewardDetail(this.id);
			if (resp.result.code === 200) {
				this.formData = resp.result.data;
				this.cityValue = resp.result.data.workPlace ? this.getRegionNameList(JSON.parse(resp.result.data.workPlace)) : [];
				let dateNum = new Date(new Date().toLocaleDateString()).getTime();
				let minDate = new Date(new Date(this.formData.deadline).toLocaleDateString()).getTime();
				this.minDate = minDate > dateNum ? dateNum : minDate;
				this.$nextTick(() => {
					this.$refs.regionSelect.init(this.cityValue);
				});
				if (Number(resp.result.data.referralsMoney) === -1) {
					this.referralsMoney = -1;
				} else {
					this.referralsMoney = 1;
				}
			}
		},
		// 弹框表单重置
		dialogFormRest() {
			this.referralsMoney = -1;
			this.cityValue = [];
			this.minDate = new Date(new Date().toLocaleDateString()).getTime();
			this.formData = {
				categoryId: 0,
				labelId: '',
				workPlace: '',
				title: '',
				remuneration: '',
				deadline: '',
				requirements: '',
				allowReferrals: 0,
				referralsMoney: '',
				currencyId: '',
				countryIosCode: ''
			};
			this.$nextTick(() => {
				this.$refs.regionSelect.init([]);
			});
		},
		async toChangeFee() {
			const resp = await queryRecruitment({
				...this.formData,
				referralsMoney: this.referralsMoney === -1 ? this.referralsMoney : this.formData.referralsMoney,
				status: 1
			});
			if (resp.result.code == 200) {
				uni.showToast({
					icon: 'none',
					title: this.$t('feeServices.post-success')
				});
				setTimeout(() => {
					this.isPost = false;
					this.leftClick(this.urlIndex);
				}, 1000);
			} else {
				this.isPost = false;
			}
		},
		async toChangePost() {
			const resp = await queryBountyReward({
				...this.formData,
				referralsMoney: this.referralsMoney === -1 ? this.referralsMoney : this.formData.referralsMoney
			});
			if (resp.result.code == 200) {
				uni.showToast({
					icon: 'none',
					title: this.$t('feeServices.post-success')
				});
				setTimeout(() => {
					this.isPost = false;
					this.leftClick(this.urlIndex);
				}, 1000);
			} else {
				this.isPost = false;
			}
		},
		// 弹框确定按钮
		dialogConfirm() {
			if (this.isPost) return;
			if (!this.isExit(true)) return;
			this.isPost = true;
			if (this.id) {
				this.toChangeFee();
			} else {
				this.toChangePost();
			}
		},
		isExit(status) {
			if (!this.formData.labelId) {
				if (status) {
					uni.showToast({
						icon: 'none',
						title: this.$t('feeServices.labelId-none')
					});
				}
				return false;
			}
			if (!this.formData.workPlace) {
				if (status) {
					uni.showToast({
						icon: 'none',
						title: this.$t('feeServices.workPlace-none')
					});
				}
				return false;
			}
			if (!this.formData.title) {
				if (status) {
					uni.showToast({
						icon: 'none',
						title: this.$t('feeServices.title-none')
					});
				}
				return false;
			}
			if (String(this.formData.remuneration) === '') {
				if (status) {
					uni.showToast({
						icon: 'none',
						title: this.$t('feeServices.remuneration-none')
					});
				}
				return false;
			}
			if (!this.formData.deadline) {
				if (status) {
					uni.showToast({
						icon: 'none',
						title: this.$t('feeServices.deadline-none')
					});
				}
				return false;
			}
			if (!this.formData.requirements) {
				if (status) {
					uni.showToast({
						icon: 'none',
						title: this.$t('feeServices.requirements-none')
					});
				}
				return false;
			}
			if (this.formData.allowReferrals === 1 && this.referralsMoney !== -1 && String(this.formData.referralsMoney) === '') {
				if (status) {
					uni.showToast({
						icon: 'none',
						title: this.$t('feeServices.referralsMoney-none')
					});
				}
				return false;
			}
			if (Number(this.formData.remuneration) < 0.01 || (this.formData.allowReferrals && this.referralsMoney !== -1 && Number(this.formData.referralsMoney) < 0.01)) {
				if (status) {
					uni.showToast({
						icon: 'none',
						title: this.$t('dating.price-none')
					});
				}
				return false;
			}
			return true;
		},
		numberChange(e, min, max) {
			const Min = Number(min || 0);
			const Max = Number(max || 0);
			const E = Number(e || 0);
			if (E < Min) {
				return Min;
			}
			if (E > Max && Max > 0) {
				return Max;
			}
			return e;
		},
		numInput(num, precision) {
			if (precision === 0) {
				// 输入纯数字
				num = num.replace(/[^\d]/g, '');
				if (String(num)[1] === '0') {
					num = Number(num);
				}
				return num;
			} else {
				num = num.replace(/[^\d.]/g, '');
				if (String(num)[0] === '0' && String(num)[1] !== '.') {
					num = Number(num);
				} else if (String(num)[0] === '.') {
					num = null;
				} else {
					if (num.indexOf('.') != num.lastIndexOf('.')) {
						num = String(num).substring(0, num.lastIndexOf('.'));
					}
				}
				if (String(num).indexOf('.') !== -1) {
					num = String(num).substring(0, num.indexOf('.') + precision + 1);
				}
				return num;
			}
		},
		async getCurrentPostCity(e) {
			this.formData.countryIosCode = e;
		},
		async getCurrency() {
			const resp = await queryCountryCurrency();
			if (resp.result.code == 200) {
				this.currencyObj = resp.result.data;
				this.formData.currencyId = this.currencyObj.id;
				this.getBond();
			}
		},
		async getBond() {
			const resp = await queryFeeBond({
				currencyId: this.currencyObj.id
			});
			if (resp.result.code === 200) {
				this.bondObj = resp.result.data;
			}
		},
		async getLabelList() {
			const resp = await queryLabelList({
				status: 1,
				orderByColumn: 'weight',
				isAsc: 'desc'
			});
			if (resp.result.code == 200) {
				this.tagList = resp.result.rows.map((item) => {
					item.label = JSON.parse(item.label);
					return {
						...item,
						labelNew: this.getLabelLangType(item)
					};
				});
			}
		},
		getLabelLangType(obj) {
			if (this.language === 'zh-Hans') {
				return obj.label.cn;
			} else if (this.language === 'en') {
				return obj.label.en;
			} else if (this.language === 'ru') {
				return obj.label.ru;
			}
		},
		getTagName() {
			if (this.formData.labelId) {
				let index = this.tagList.findIndex((o) => o.id == this.formData.labelId);
				if (index !== -1) {
					return this.tagList[index].labelNew;
				}
			}
			return '';
		},
		getTypeName() {
			let index = this.typeList.findIndex((o) => o.value == this.referralsMoney);
			if (index !== -1) {
				return this.typeList[index].label;
			}
			return '';
		}
	},
	onLoad(e) {
		this.language = uni.getLocale();
		this.getPrePages(this.urlIndex); // 获取上一个页面的路径已经参数
		this.getLabelList();
		this.getCurrency();
		this.id = e.id;
		if (this.id) {
			this.getMainDetail();
		} else {
			this.dialogFormRest();
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .Requirements .uni-textarea-textarea {
	height: 180upx;
	color: #000000;
	font-size: 28upx;
}

::v-deep .Service-title .uni-textarea-textarea {
	height: 110upx;
	color: #000000;
	font-size: 28upx;
}

::v-deep .u-textarea__count {
	color: rgba(0, 0, 0, 0.3);
}
.header {
	padding-top: var(--status-bar-height);
	display: flex;
	justify-content: space-between;
	align-items: center;
	.huiqu {
		margin-left: 30rpx;
		width: 32rpx;
		height: 32rpx;
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
}
.header__center {
	border: 1rpx solid #61bdb2;
	border-radius: 10rpx;
	display: flex;
	width: 460rpx;
	height: 60rpx;
	margin: 0 auto;
	.box_tb {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #61bdb2;
		font-size: 28rpx;
		&.active {
			background-color: #61bdb2;
			color: #fff;
			font-weight: 700;
		}
	}
}
.omit {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: break-word;
}

.released-view {
	padding: 30upx;

	.choose-box {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.title {
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
		}

		.placeholder {
			color: rgba(0, 0, 0, 0.3) !important;
		}
	}

	.you {
		color: #a6a6a6;
		margin-left: 24upx;
	}

	.category-view {
		padding: 35upx 30upx;
		background: #ffffff;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		font-size: 30upx;
		font-weight: 400;
		color: #000000;
	}

	.Paid-view {
		margin-top: 30upx;
		padding: 30upx 20upx 14upx;
		background: #ffffff;
		border-radius: 20upx;
		.view_img{
			width: 100rpx;
			height: 100rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
	.bond-tip {
		width: 100%;
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #878787;
		padding: 30upx 0upx 60upx;
		line-height: 40upx;
		.bond-money {
			color: #fe6600;
			font-weight: bold;
		}
	}

	.write-view {
		padding: 0upx 30upx;
		background: #ffffff;
		border-radius: 20upx;
		margin-top: 30upx;

		.write-detail {
			padding: 40upx 0upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid #f6f6f6;
			.allow-tip {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #878787;
				margin-top: 8upx;
			}
		}
	}

	.switch-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 70upx;

		.switch-left {
			display: flex;
			align-items: center;
		}

		.money {
			font-size: 30upx;
			font-weight: 500;
			color: #fe6600;
			margin-left: 40upx;
		}
	}

	.btn {
		font-size: 30upx;
		font-weight: 500;
		color: #878787;
		width: 100%;
		height: 90upx;
		background: #e1e1e1;
		border-radius: 20upx;
		text-align: center;
		line-height: 90upx;
	}
	.btn-green {
		background: #61bdb2;
		color: #ffffff;
	}
}
uni-button:after {
	border: unset;
}
</style>
